<template>
	<div class="content">
		<div class="main">
				<!-- 表单 -->
				<el-form ref="form" class="tabsMain" :model="addForm" label-width="" size="mini">
					<!-- left -->
					<div class="tabsMain-left">
						<el-form-item class="tabsMain-left-a" label="" style="margin-left: 12px;">
							<span>员工证件照</span>
							<el-upload
							      class="upload-demo"
							      :on-preview="handlePreview"
							      :on-remove="handleRemove"
							      :before-remove="beforeRemove"
							      multiple
							      :limit="1"
							      :on-exceed="handleExceed"
							      :file-list="fileList"
							      :http-request="httpRequest"
							    >
							      <el-button size="small" type="primary">点击上传</el-button>
							      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
							    </el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="imageUrl" alt="">
							</el-dialog>
							<!-- <el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog> -->
						</el-form-item>
						<!-- 手工签名 -->
						<el-form-item class="tabsMain-left-a" label="" style="margin-left: 12px;">
							<span>手工签名</span>
							<el-upload
							  :class="{hide:hideUpload}"
							  :limit="1"
							  :on-change="handleImgChange"
							  list-type="picture"
							  :on-success="shandleAvatarSuccess"
							  :before-upload="beforeAvatarUpload">
							  <el-button size="small" type="primary">点击上传</el-button>
							  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="imageUrl" alt="">
							</el-dialog>
							<!-- <el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog> -->
						</el-form-item>
						<el-form-item class="tabsMain-left-a" label="" style="margin-left: 12px;">
							<span>资格证电子图片</span>
							<el-upload
							  :class="{hide:hideUpload}"
							  :limit="1"
							  :on-change="handleImgChange"
							  list-type="picture"
							  :on-success="phandleAvatarSuccess"
							  :before-upload="beforeAvatarUpload">
							  <el-button size="small" type="primary">点击上传</el-button>
							  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="imageUrl" alt="">
							</el-dialog>
							<!-- <el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog> -->
						</el-form-item>
						<el-form-item class="tabsMain-left-a" label="" style="margin-left: 12px;">
							<span>执业证电子图片</span>
							 <el-upload
							  :class="{hide:hideUpload}"
							  :limit="1"
							  :on-change="handleImgChange"
							  list-type="picture"
			
							  :on-success="qhandleAvatarSuccess"
							  :before-upload="beforeAvatarUpload">
							  <el-button size="small" type="primary">点击上传</el-button>
							  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="imageUrl" alt="">
							</el-dialog>
							<!-- <el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog> -->
						</el-form-item>
					</div>
					<!-- right -->
					<div class="tabsMain-right">
						<el-form-item ref="form" :model="addForm" size="mini">
							<el-input
							  type="textarea"
							  :autosize="{ minRows:28, maxRows: 8}"
							  placeholder="请输入内容"
							  v-model="addForm.intrduce">
							</el-input>
						</el-form-item>
					</div>
						
				</el-form>

		</div>

		<div class="feet">
			
		</div>
	</div>
</template>

<script>
	// selfs / sons
	// self
	import axios from 'axios';  // 确保已导入axios
	// 接口
	import { addStaff } from "@/api/user.js";
	export default {
		components: {
			// AccTypeTab,
		},
		data() {
			return {
				// str
				imageUrl:'',
				hideUpload:'',
				shideUpload:'',
				//arr
				formType:[],
				fileList: [],
				sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
				statusOptions:[{id:1,label:'是',value:'是'},{id:2,label:'否',value:'否'}],
				//obj
				addForm:{
					signatureImage:'',//手工签名照片
					workIdPhoto:'',//工作证件照
					pcElectronicImage:'',//执业证电子图片
					qcElectronicImage:''//资格证电子图片
				},
				aus:{},
				//blean 
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false
			}
		},
		mounted() {
			// // 左侧提交表单
			// this.formType = AccTypeTab.map(function(v) {
			// 	return v
			// })
			// console.log(this.formType);
		},
		methods: {
			/**
			 * 上传图片
			 * 
			 */
			// 独立的图片上传方法
			uploadImage(file) {
			    const formData = new FormData();
			    formData.append('file', file);
			    
			    // 创建独立的axios实例，不继承全局配置
			    const instance = axios.create({
			      baseURL: 'http://192.168.3.155:9999',
			      timeout: 100000,
			      headers: {
			        'Content-Type': 'multipart/form-data',
			        'Authentication': localStorage.getItem('token')
			      }
			    });
			    
			    return instance.post('/outpatient/builderImage', formData);
			},
			// 修改所有上传处理方法
			httpRequest(item) {
				this.uploadImage(item.file)
					.then(response => {
				   this.addForm.workIdPhoto = response.data.data;
				   console.log('上传成功:', response.data.data);
				   this.$emit('children', this.addForm);
				}).catch(error => {
				   console.error('上传失败:', error);
				   this.$message.error('上传失败');
				});
			},
			resetForm() {
			    if (this.$refs.form) {
			      this.$refs.form.resetFields();
			    }
			    
			    // 清空文件上传
			    if (this.$refs.uploadSignature) {
			      this.$refs.uploadSignature.clearFiles();
			    }
			    if (this.$refs.uploadWorkPhoto) {
			      this.$refs.uploadWorkPhoto.clearFiles();
			    }
			    // 其他上传组件...
			    
			    // 重置数据
			    this.addForm = {
			      signatureImage: '',
			      workIdPhoto: '',
			      pcElectronicImage: '',
			      qcElectronicImage: ''
			    };
			  },
			handleRemove(file, fileList) {
			  console.log('移除文件:', file, fileList);
			},
			handlePreview(file) {
			  console.log('预览文件:', file);
			},
			handleExceed(files, fileList) {
			  this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
			  return this.$confirm(`确定移除 ${file.name}？`);
			},
			//上传成功处理函数 手工签名照片
			whandleAvatarSuccess(res){
			this.addForm.signatureImage = res
			this.dialogVisible = false
			console.log(res);
			this.$emit('children',this.addForm)
			},
			//绑定事件  :on-change="handleImgChange"
			handleImgChange (file, fileList) {
			  this.hideUpload = fileList.length >= 1; //1为设置的最大允许上传数  
			},
			//上传成功处理函数 工作证件照
			shandleAvatarSuccess(res, file) {
			    this.uploadImage(file.raw)
			      .then(response => {
			        this.addForm.workIdPhoto = response.data;
			        this.$emit('children', this.addForm);
			    }).catch(error => {
			        console.error('上传失败:', error);
			        this.$message.error('上传失败');
			    });
			},
			//绑定事件  :on-change="handleImgChange"
			shandleImgChange (file, fileList) {
			  this.shideUpload = fileList.length >= 1; //1为设置的最大允许上传数
			},
			//上传成功处理函数 执业证电子图片
			phandleAvatarSuccess(res, file){
			    this.uploadImage(file.raw)
			      .then(response => {
			        this.addForm.pcElectronicImage = response.data;
			        this.$emit('children', this.addForm);
			    }).catch(error => {
			        console.error('上传失败:', error);
			        this.$message.error('上传失败');
			    });
			},
			//上传成功处理函数 资格证电子图片
			qhandleAvatarSuccess(res, file){
			    this.uploadImage(file.raw)
			      .then(response => {
			        this.addForm.qcElectronicImage = response.data;
			        this.$emit('children', this.addForm);
			    }).catch(error => {
			        console.error('上传失败:', error);
			        this.$message.error('上传失败');
			    });
			},
		    beforeAvatarUpload(file){
			const isJPG = 
			file.type === 'image/jpeg'||
			file.type === 'image/svg' ||
			file.type === 'image/png' ||
			file.type === 'image/gif' ||
			file.type === 'image/webp';

			const isLt2M = file.size / 1024 / 1024 < 10;

			if (!isJPG) {
			  this.$message.error('上传头像图片只能是 png/svg/jpeg/png/GIF格式!');
			}
			if (!isLt2M) {
			  this.$message.error('上传头像图片大小不能超过 10MB!');
			}
			return isJPG && isLt2M;
			},
		},
			
		//生命周期
		created() {
			
		},

	}
</script>

<style lang="less" scoped>
.hide /deep/ .el-upload--picture-card {
  display: none;
}
.content{
	height: 100%;
	width: 100%;
	.header{
		
	}
	.main{
		border: 1px solid #e8f0ee;
		padding: 12px;
		.tabsMain{
			display: flex;
			justify-content: space-between;
			padding: 12px;
			.tabsMain-left{
				width: 448px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				.image-uploader .el-upload {
				  border: 1px dashed #d9d9d9;
				  border-radius: 6px;
				  cursor: pointer;
				  position: relative;
				  overflow: hidden;
				}
				.image-uploader .el-upload:hover {
				  border-color: #409eff;
				}
			}
			.tabsMain-right{
				width: 68%;
				margin-top: 28px;
				margin-left: 12px;
			}
			// date flex
			.autoWidth{
				width: 100%; /* 设置宽度为100% */
				
			}
		}
	}
}
</style>